<template>
	<Modal v-model="choose" title="员工列表" :closable="false">
		<Button class="cancel" type="error" @click="cancel">取消</Button>
		<Layout :class="'bg-white'">
			<Col class="p-2" span="7">
			<Input class="w-100" v-model="tableInfo.account" placeholder="请输入销售名称" />
			<Button class="inquire" type="primary" shape="circle" @click="search" icon="ios-search">查询</Button>
			
			</Col>
			<Table border :class="'m-2'" :columns="tableInfo.columnInfo" :data="tableInfo.data">
				<template slot-scope="{ row, index }" slot="action" v-model="tableInfo.userId">
					<Button type="primary" size="small" style="margin-right: 5px"
						@click="transferData(row.userId,row.account)">选择</Button>
				</template>
			</Table>
		</Layout>
		<div slot="footer"></div>
	</Modal>
</template>

<script>
	export default {
		data() {
			return {

				choose: false,
				tableInfo: {
					columnInfo: [{
							title: "员工编号",
							key: "userId",
							width: 150
						},
						{
							title: "员工名称",
							key: "account",
							width: 150
						},
						{
							title: "操作",
							slot: 'action'
						}
					],
					data: [],
					userId: "",
					account:""
				},
			}
		},
		props: {
			show: {
				required: true,
			}
		},
		watch: {
			show(newVal) {
				this.choose = newVal;
			}
		},
		methods: {
			search: function() {
				this.http.get({
					url: "/user/page",
					param: {
						current:1,
						size:99999,
						account:this.tableInfo.account,

					},
				}).then(data => {
					console.log(data.records)
					this.tableInfo.data = data.records;
					this.choose = this.$props.show;
				});
			},
			init: function() {
				this.search();
			},
			transferData: function(userId,account) {
				this.$emit('on-close', false, userId,account)
				this.$Message.info('选择成功');
			},
			cancel: function() {
				this.$emit("on-close", false);
				this.$Message.info('取消成功');
			}

		},
		created: function() {
			this.init();
		}
	}
</script>

<style>
	.inquire {
		margin-left: 300px;
		margin-top: -50px;
	}

	.cancel {
		margin-left: 400px;
		margin-top: -90px;
	}
</style>
